<style lang='less'>
.users-vue {}
</style>
<template>
  <div class="users-vue frame-page h-panel">
    <div class="h-panel-bar">
      <Button class="h-btn h-btn-primary" @click="addMainUser">
        创建用户
      </Button>
      <Button @click="removeUsers" :disabled="!selected.length" class="h-btn h-btn-red">
        刪除
      </Button>
      <button class="h-btn  h-btn-yellow"><i class="h-icon-refresh"></i><span>刷新</span></button>
    </div>
    <div class="h-panel-body">
      <Table ref="user" :datas="userOption.datas" checkbox @select="onselect">
        <TableItem title="ID" prop="id" width="50" />
        <TableItem title="头像" width="100">
          <template #default="{ data }">
            <Avatar :src="data.avatar || require('../../images/avatar.png')" :width="30"></Avatar>
          </template>
        </TableItem>
        <TableItem title="用户名" prop="username" is-tree-opener />
        <TableItem title="操作">
          <template #default="{ data }">
            <Button size="s" color="primary" @click="edit(data)">编辑
            </Button>
            <Poptip content="确认删除?" @confirm="confirm(data.id)">
              <Button size="s" class="h-btn h-btn-s h-btn-red">
                删除
              </Button>
            </Poptip>
          </template>
        </TableItem>
      </Table>
    </div>
    <Modal v-model="openEditModal" title="编辑用户" :hasCloseIcon="true">
      <UserEdit :account="account" :users="userOption.datas" @submit="saveUser"></UserEdit>
    </Modal>
  </div>
</template>
<script>
import Request from '@js/common/request';
import UserEdit from './components/user-edit.vue';
import { loading, message } from 'heyui';
export default {
  components: { UserEdit },
  data() {
    return {
      userOption: {
        datas: []
      },
      openEditModal: false,
      account: null,
      selected: []
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.getUsers();
    },
    confirm(data) {
      Request.Account.removeUsers(data).then(resp=>{
        this.init()
      })
    },
    edit(account) {
      this.account = account
      this.openEditModal = true
    },
    add(account) {
      this.account = { pid: account.pid }
      this.openEditModal = true
    },
    addMainUser() {
      this.account = { pid: 0 }
      this.openEditModal = true
    },
    getUsers() {
      Request.Management.users().then(resp => {
        this.userOption.datas = resp.data;
        setTimeout(() => {
          this.$refs.user.expandAll();
        }, 300);
      });
    },
    saveUser(param) {
      Request.Account.saveAccount(param).then(resp => {
        this.saveloading = false;
        message({ type: 'success', text: '保存成功' })
        if (resp.ok) {
          this.openEditModal = false
          this.init()
        }
      });
    },
    onselect(data) {
      this.selected = []
      data.forEach(element => {
        this.selected.push(element.id)
      });
    },
    removeUsers() {
      this.confirm(this.selected.join(','))
    }
  },
  computed: {},
};
</script>
